<!--
 * @Author: your name
 * @Date: 2021-11-13 15:10:09
 * @LastEditTime: 2021-11-13 15:15:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /vue-form-json/src/view/form.vue
-->
<template>
  <div class="home">
    <h3>Form (校验表单)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名称：" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="邮箱：" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
    </iForm>
  </div>
</template>

<script lang="ts">
import iForm from '../components/form/form.vue'
import iFormItem from '../components/form//formItem.vue'
import iInput from '../components/input.vue'

export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur'}],
        mail: [
          { required: true, message: '不能为空', trigger: 'blur'},
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
        ]
      }
    }
  }
}
</script>